import { BaseScrollList, BigScreenContainer, TransformCategory, Loading } from "coerger-design";
import CenterFoot from "./components/ContentCenter/CenterFoot/CenterFoot";
import CenterMap from "./components/ContentCenter/CenterMap/CenterMap";
import CenterTop from "./components/ContentCenter/CenterTop/CenterTop";
import Order from "./components/ContentCenter/Order/Order";
import Device from "./components/ContentLeft/Device/Device";
import HotSellingCategories from "./components/ContentLeft/HotSellingCategories/HotSellingCategories";
import MonthlyOverview from "./components/ContentLeft/MonthlyOverview/MonthlyOverview";
import UsersCount from "./components/ContentLeft/Users/UsersCount";
import UsersAge from "./components/ContentLeft/UsersAge/UsersAge";
import UsersSex from "./components/ContentLeft/UsersSex/UsersSex";
import RightFoot from "./components/ContentRight/RightFoot";
function App() {
  const arr = ["北京", "上海", "广州", "深圳", "成都", "武汉"];
  const arr1 = ["订单量", "销售额", "店铺数", "人数"];
  const headerData = ["城市订单量", "店铺数", "人数", "新店铺数量", "人均订单量"];
  const rowsData = [
    { cityOrder: "上海+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "北京+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "广州+15%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "深圳+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "武汉+21%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "成都+1%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "南京+18%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "杭州+13%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "重庆+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "安徽+10%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "上海+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "北京+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "广州+15%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "深圳+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "武汉+21%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "深圳+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "武汉+21%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "成都+1%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "南京+18%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "杭州+13%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
    { cityOrder: "重庆+12%", storyCount: 141, userCount: 174, newStoryC0unt: 152, avenger: 376 },
  ];
  return (
    <BigScreenContainer width={3840} height={2160}>
      <Loading></Loading>
      <div className="header">
        <div className="logo">
          <svg viewBox="0 0 1024 1024" width="150" height="150">
            <path
              d="M532.48 788.48c-10.24-10.24-17.066667-20.48-23.893333-34.133333-6.826667 13.653333-13.653333 23.893333-23.893334 34.133333-17.066667 17.066667-37.546667 27.306667-61.44 27.306667 0 34.133333 10.24 34.133333 81.92 34.133333h6.826667c75.093333 0 85.333333 0 85.333333-34.133333-27.306667 0-47.786667-10.24-64.853333-27.306667zM634.88 392.533333c6.826667 6.826667 20.48 17.066667 47.786667 17.066667 23.893333 0 37.546667-10.24 47.786666-17.066667-10.24-6.826667-23.893333-17.066667-47.786666-17.066666-27.306667 0-40.96 10.24-47.786667 17.066666z"
              fill=""
              p-id="2494"
            ></path>
            <path
              d="M1006.933333 98.986667c-10.24-47.786667-30.72-61.44-51.2-64.853334-44.373333-6.826667-95.573333 47.786667-119.466666 81.92C781.653333 54.613333 675.84 0 600.746667 0c-37.546667 0-44.373333 0-61.44 10.24-3.413333 0-6.826667 3.413333-10.24 3.413333v105.813334c116.053333-68.266667 245.76 27.306667 303.786666 88.746666 6.826667 6.826667 6.826667 17.066667 0 23.893334-6.826667 6.826667-10.24 6.826667-13.653333 6.826666-3.413333 0-10.24-3.413333-13.653333-6.826666-6.826667-6.826667-153.6-167.253333-276.48-71.68v34.133333c122.88-44.373333 215.04 64.853333 218.453333 68.266667 3.413333 6.826667 3.413333 17.066667-3.413333 23.893333-3.413333 3.413333-6.826667 3.413333-10.24 3.413333-3.413333 0-10.24-3.413333-13.653334-6.826666-3.413333-3.413333-85.333333-98.986667-191.146666-51.2v129.706666c-3.413333 10.24-10.24 13.653333-17.066667 13.653334h-3.413333c-6.826667-3.413333-13.653333-10.24-13.653334-17.066667V235.52C389.12 184.32 307.2 279.893333 303.786667 283.306667c-3.413333 3.413333-10.24 6.826667-13.653334 6.826666-3.413333 0-6.826667 0-10.24-3.413333-10.24-6.826667-10.24-17.066667-3.413333-23.893333 0 0 95.573333-112.64 218.453333-64.853334v-34.133333c+126.293333-98.986667-273.066667 64.853333-276.48 71.68-6.826667 0-10.24 3.413333-13.653333 3.413333-3.413333 0-10.24 0-13.653333-3.413333-6.826667-6.826667-6.826667-17.066667 0-23.893333 58.026667-64.853333 187.733333-157.013333 303.786666-88.746667V17.066667c-3.413333-3.413333-6.826667-3.413333-10.24-3.413334-17.066667-13.653333-23.893333-13.653333-61.44-13.653333-78.506667 0-187.733333 54.613333-238.933333 119.466667-30.72-37.546667-92.16-95.573333-136.533333-81.92-20.48 6.826667-30.72 27.306667-30.72 64.853333 0 102.4 58.026667 184.32 81.92 215.04-23.893333 30.72-81.92 116.053333-81.92 259.413333 0 6.826667 3.413333 13.653333 13.653333 17.066667 6.826667 3.413333 13.653333 0 20.48-6.826667 13.653333-17.066667 27.306667-37.546667 40.96-51.2-17.066667 54.613333-37.546667 143.36-37.546667 201.386667 0 6.826667 3.413333 13.653333 10.24 17.066667 6.826667 3.413333 13.653333 0 17.066667-3.413334 10.24-10.24 40.96-34.133333 68.266667-51.2-10.24 54.613333-23.893333 150.186667 13.653333 184.32 6.826667 6.826667 17.066667 6.826667 23.893333 0l47.786667-47.786666c13.653333 44.373333 44.373333 133.12 98.986667 184.32 0 3.413333 6.826667 3.413333 13.653333 3.413333 6.826667-3.413333 10.24-10.24 10.24-17.066667v-64.853333c27.306667 40.96 75.093333 81.92 150.186667 81.92h6.826666c75.093333 0 122.88-44.373333 150.186667-81.92v64.853333c0 6.826667 3.413333 13.653333 10.24 17.066667h6.826667c3.413333 0 10.24 0 10.24-3.413333 54.613333-51.2 85.333333-139.946667 98.986666-184.32l47.786667 47.786666c6.826667 6.826667 17.066667 6.826667 23.893333 0 34.133333-34.133333 23.893333+129.706667 13.653334-184.32 34.133333 20.48 64.853333 51.2 68.266666 51.2h17.066667c6.826667-3.413333 10.24-10.24 10.24-17.066666 0-58.026667-17.066667-153.6-27.306667-204.8 10.24 10.24 20.48 27.306667 27.306667 40.96 3.413333 6.826667 10.24 10.24 20.48 10.24 6.826667-3.413333 13.653333-10.24 13.653333-17.066667 0-136.533333-54.613333-211.626667-78.506666-238.933333 27.306667-34.133333 92.16+122.88 78.506666-225.28zM215.04 460.8c-58.026667 44.373333-37.546667 146.773333-37.546667 146.773333 3.413333 10.24-3.413333 17.066667-13.653333 20.48h-3.413333c-6.826667 0-13.653333-6.826667-17.066667-13.653333 0-3.413333-27.306667+122.88 51.2-180.906667 6.826667-6.826667 17.066667-3.413333 23.893333 3.413334 6.826667 6.826667 6.826667 17.066667-3.413333 23.893333z m40.96-61.44c-3.413333-3.413333 0-10.24 0-13.653333 0-3.413333 23.893333-44.373333 81.92-44.373334s81.92 40.96 81.92 44.373334c3.413333 3.413333 3.413333 10.24 0 17.066666 0 3.413333-23.893333 44.373333-81.92 44.373334-64.853333-3.413333-81.92-47.786667-81.92-47.786667zM692.906667 785.066667c-17.066667 17.066667-37.546667 27.306667-64.853334 30.72-3.413333 64.853333-34.133333 68.266667-119.466666 68.266666h-3.413334-3.413333c-92.16 0-112.64-6.826667-116.053333-68.266666-27.306667-3.413333-47.786667-13.653333-64.853334-30.72-40.96-44.373333-37.546667-119.466667-37.546666+122.88 6.826667-6.826667 13.653333-13.653333 23.893333-13.653334 10.24 0 17.066667 10.24 17.066667 17.066667 0 0-3.413333 61.44 30.72 95.573333 13.653333 13.653333 30.72 20.48 54.613333 20.48 23.893333 0 40.96-6.826667 54.613333-20.48 23.893333-23.893333 30.72-71.68 30.72-105.813333v-10.24c-37.546667 0-54.613333-6.826667-81.92-40.96-6.826667-6.826667-3.413333-17.066667 3.413334-23.893333 6.826667-6.826667 17.066667-3.413333 23.893333 3.413333 20.48 27.306667 27.306667 27.306667 71.68 27.306667h6.826667c44.373333 0 47.786667-3.413333 68.266666-27.306667 6.826667-6.826667 17.066667-6.826667 23.893334-3.413333 6.826667 6.826667 6.826667 17.066667 3.413333 23.893333-27.306667 30.72-40.96 37.546667-81.92 40.96v10.24c0 34.133333 3.413333 78.506667 30.72 105.813333 13.653333 13.653333 30.72 20.48 54.613333 20.48 23.893333 0 40.96-6.826667 54.613334-20.48 30.72-34.133333 30.72-95.573333 30.72-95.573333 0-10.24 6.826667-17.066667 17.066666-17.066667s17.066667 6.826667 17.066667 17.066667c-3.413333 3.413333 0 75.093333-44.373333 119.466667z m71.68-385.706667c0 3.413333-23.893333 44.373333-81.92 44.373333-64.853333 0-81.92-44.373333-85.333334-44.373333-3.413333-3.413333 0-10.24 0-13.653333 0-3.413333 23.893333-44.373333 81.92-44.373334s81.92 40.96 81.92 44.373334c6.826667 3.413333 6.826667 10.24 3.413334 13.653333z m112.64 215.04c-3.413333 6.826667-10.24 13.653333-17.066667 13.653333h-3.413333c-10.24-3.413333-13.653333-10.24-13.653334-20.48 0 0 23.893333-102.4-37.546666-146.773333-6.826667-6.826667-10.24-17.066667-3.413334-23.893333 6.826667-6.826667 17.066667-10.24 23.893334-3.413334 78.506667 58.026667 51.2 177.493333 51.2 180.906667z"
              fill=""
              p-id="2495"
            ></path>
            <path d="M385.706667 392.533333c-6.826667-6.826667-20.48-17.066667-44.373334-17.066666-27.306667 0-40.96 10.24-47.786666 17.066666 6.826667 6.826667 20.48 17.066667 47.786666 17.066667 23.893333 0 37.546667-10.24 44.373334-17.066667z" fill="" p-id="2496"></path>
          </svg>
        </div>
        <div className="header-content">
          <div style={{ fontSize: "70px" }}>大屏数据可视化项目</div>
          <div className="subTitle">Large screen data visualization project</div>
        </div>
      </div>
      <div className="container-box">
        <div className="content-left">
          <UsersCount></UsersCount>
          <UsersAge></UsersAge>
          <Device></Device>
          <UsersSex></UsersSex>
          <MonthlyOverview></MonthlyOverview>
          <HotSellingCategories></HotSellingCategories>
        </div>
        <div className="content-center">
          <CenterTop></CenterTop>

          <div className="center-top1">
            <TransformCategory data={arr}></TransformCategory>
          </div>
          <div className="box">
            <div className="left">
              <div className="mapChart">
                <CenterMap></CenterMap>
              </div>

              <div className="center-top1">
                <TransformCategory data={arr1}></TransformCategory>
                <Order></Order>
                <CenterFoot></CenterFoot>
              </div>
            </div>
            <div className="right subTitle">
              <BaseScrollList headerData={headerData} rowsData={rowsData} rowNum={12}></BaseScrollList>
              <RightFoot></RightFoot>
            </div>
          </div>
        </div>
      </div>
    </BigScreenContainer>
  );
}

export default App;
